<template>
	<view class="author-list-container">
		<scroll-view scroll-y="true" class="list-scroll">
			<view class="author-list-card" v-for="item in authorList" :key="item._id"
				@longpress="fllowAuthorLongpress(item.id)">
				<view class="author-logo">
					<image :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class="author-desc-container">
					<view class="author-info-title">
						{{item.author_name}}
					</view>
					<view class="author-info-bottom">
						<view class="author-info-left">
							{{item.professional}}
						</view>
						<view class="author-info-right">
							<view class="info-right-title">
								发帖：{{item.article_ids.length}}
							</view>
							<view class="info-right-title">
								粉丝：{{item.fans_count}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "AuthorList",
		props: {
			authorList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			fllowAuthorLongpress(id) {
				uni.showModal({
					title: '取消关注',
					content: '是否确定取消关注该用户？',
					success: (res) => {
						if (res.confirm) {

							this.$emit('fllowAuthorLongpress', id)
						} else if (res.cancel) {
							return
						}
					}
				});

			}
		},
	}
</script>

<style lang="scss" scoped>
	.author-list-container {
		height: 100%;

		.list-scroll {
			height: 100%;

			.author-list-card {
				@include flex(flex-start);
				align-items: flex-start;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
				margin: 0 20rpx;
				box-sizing: border-box;

				.author-logo {
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.author-desc-container {
					flex-grow: 1;
					@include flex(flex-between, column);
					align-items: flex-start;
					padding-left: 20rpx;
					height: 80rpx;

					.author-info-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						line-height: 1.2;
					}

					.author-info-bottom {
						@include flex();
						width: 100%;
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #666;

						.author-info-right {
							@include flex(flex-start);

							.info-right-title {
								margin-left: 20rpx;
							}
						}
					}
				}
			}

		}
	}
</style>
